import './Category.scss'
import React from 'react'
import {connect} from 'react-redux'

import {getHeaderDate} from "../../actions/categoryAction.js";
//外卖种类
class Category extends React.Component{
  constructor(prors){
    super(prors)
    this.fetchDate()
  }
  fetchDate(){
      this.props.dispatch(getHeaderDate())
    }
  renderItems(){
    let items =this.props.items
    items = items.splice(0,8)
    
    return items.map((item,index)=>{
      return(
        <div key={index} className='category-item'>
          <img className='item-icon' src={item.url}/>
          <p className='item-name'>{item.name}</p>
        </div>
      )
    })
  }
  render() {
    return (
      <div className='category-content clearfix'>
        {this.renderItems()}
      </div>
    )
  }
}
export default connect(
  state=>({
  items:state.categoryReducer.items
})
)(Category)